<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片 -->
		<el-card>
			<!-- 条件查询 -->
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="角色名称">
					<el-input v-model="formInline.Name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="onSubmit">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-form>
				<el-form-item>
					<el-button type="primary" @click="adddialogFormVisible=true">添加用户</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table :data="dateList" border stripe>
				<el-table-column label="序号" prop="Id"></el-table-column>
				<el-table-column label="角色名称" prop="Name"></el-table-column>
				<el-table-column label="操作" width="350px">
					<template slot-scope="scope">
						<el-button size="mini" @click="MokuaiSetRightDialog(scope.row)" plain>模块</el-button>
						<el-button type="warning" size="mini">权限</el-button>
						<el-button type="primary" size="mini" @click="update(scope.row)">修改</el-button>
						<el-button type="danger" size="mini" @click="removeById(scope.row.Id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
			<!-- 新增 -->
			<el-dialog title="新建角色" :visible.sync="adddialogFormVisible">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="角色名称" prop="Name">
						<el-input v-model="ruleForm.Name"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="canselSubmit">取 消</el-button>
					<el-button type="primary" @click="onSubmitAdd">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑 -->
			<el-dialog title="修改角色" :visible.sync="editdialogFormVisible">
				<el-form :model="editForm">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="editForm.Name" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="canselSubmit">取 消</el-button>
					<el-button type="primary" @click="submitUpdate">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 模块管理的对话框 -->
			<el-dialog title="你正在设置角色模块" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
				<div>
					<p>当前的角色:{{roleInfo.Name}}</p>
					<p>
						<el-tree :data="roleslist" show-checkbox node-key="Id" :default-checked-keys="value" ref="tree" :props="defaultProps">
						</el-tree>
					</p>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="setRoleDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formInline: {
					Name: ''
				},
				dateList: [],
				page: 1,
				limit: 10,
				count: 0,
				adddialogFormVisible: false,
				ruleForm: {
					Name: ''
				},
				rules: {
					Name: [{
						required: true,
						message: '请输入角色名称',
						trigger: 'blur'
					}]
				},
				editdialogFormVisible: false,
				editForm: {},
				formLabelWidth: '110px',
				setRoleDialogVisible: false,
				roleInfo: {},
				defaultProps: {
					children: 'children',
					label: 'Name'
				},
				roleslist: {},
				value: []
			}
		},
		created() {
			this.GetDataLists();
		},
		methods: {
			canselSubmit() {
				this.editdialogFormVisible = false,
				this.adddialogFormVisible=false,
					this.GetDataLists(),
					this.editform = {}
			},
			onSubmit() {

			},
			handleSizeChange(val) {
				this.limit = val;
				this.GetDataLists();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.GetDataLists();
			},
			async GetDataLists() {
				const {
					data: res
				} = await this.$http.get('/api/api/Role/GetDataList', {
					params: {
						page: this.page,
						limit: this.limit,
						Name: this.formInline.Name
					}
				})
				// console.log(res.code)
				if (res.code !== 0) {
					return this.$message.error("获取用户列表失败");
				}
				this.dateList = res.data
				this.count = res.count
			},
			async onSubmitAdd() {
				const {
					data: res
				} = await this.$http.post('/api/api/Role/AddRoleses', this.ruleForm)
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				}
				this.adddialogFormVisible = false;
				this.GetDataLists();
				this.$message.success(res.msg)
			},
			update(row) {
				this.editdialogFormVisible = true;
				this.editForm = row;
			},
			async submitUpdate() {
				const {
					data: res
				} = await this.$http.post('/api/api/Role/UpadateRoleses', this.editForm)
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				}
				this.editdialogFormVisible = false;
				this.GetDataLists();
				this.$message.success(res.msg)
			},
			async removeById(Id) {
				const confirmResult =
					await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).catch(err => err)
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				const {
					data: res
				} = await this.$http.delete('/api/api/Role/DeleteEmpUser?id=' + Id)
				if (res.code !== 0) {
					return this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.GetDataLists();
			},
			//展示模块管理的对话框
			async MokuaiSetRightDialog(row) {
				this.roleInfo = row
				const {
					data: res
				} = await this.$http.get('/api/api/Role/GetAllModules')
				if (res.code !== 0) {
					this.$message.error("获取全部模块失败")
				}
				this.roleslist = res.data;
				const {
					data: ress
				} = await this.$http.post('/api/api/Role/GetMyModules', this.roleInfo)
				if (res.code !== 0) {
					return this.$message.error('获取模块列表失败！')
				}
				this.value = ress.data;
				this.setRoleDialogVisible = true
			},
			//点击按钮 ，分配角色
			async saveRoleInfo() {
				this.Ids = this.$refs.tree.getCheckedKeys();
				const {
					data: res
				} = await this.$http.get('/api/api/Role/EditRM', {
					params: {
						Id: this.roleInfo.Id,
						Value: this.Ids.toString()
					}
				})
				if (res.code !== 0) {
					return this.$message.error(res.msg)
				}
				this.$message.success(res.msg)
				//刷新数据列表
				this.GetDataLists();
				//隐藏对话框
				this.setRoleDialogVisible = false
			},
			//监听分配角色对话框的关闭事件
			setRoleDialogClosed() {
				this.value = []
				this.userinfo = {}
				this.selectedRoleId = '';
			}
		}
	}
</script>

<style scoped>
	.el-tag {
		margin: 7px;
	}

	.bdtop {
		border-top: 1px solid #eee;
	}

	.bdbottom {
		border-bottom: 1px solid #eee;
	}

	.vcenter {
		display: flex;
		align-items: center;
	}
</style>
